<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <vxe-grid ref='orderMaterialRelationGrid' v-bind="gridOptions" class="my-grid66">

        <template #operate="{ row }">

          <a-space>
            <a-select
              ref="select"
              v-model:value="row.status"
              style="width: 120px"
              @focus="focus"
              @change="operateChange($event,row)"
            >
              <a-select-option value="验收合格">验收合格</a-select-option>
              <a-select-option value="不合格">不合格</a-select-option>
            </a-select>
          </a-space>
        </template>

      </vxe-grid>
      <a-col :md="12" :sm="24" :xs="24">
        <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
          <div>
            <teleport to="#materialOrderAcceptModalFooter">
              <div>
                <a-space size="middle">
                  <a-button @click="materialOrderListApp.acceptModalShowing=false">取消
                  </a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit"
                    :loading="loading">提交
                  </a-button>

                </a-space>
              </div>
            </teleport>
          </div>

        </a-form-item>
      </a-col>
    </a-card>
  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRefs, provide, inject} from 'vue'//, Ref
import {VXETable} from 'vxe-table'//, VxeGridInstance, VxeGridProps
import {
  OrderMaterialRelationService
} from "@/views/restaurant/material/orderMaterialRelation/orderMaterialRelationService";


export default defineComponent({
  components: {},
  props: {
    orderId: Number
  },
  setup(props) {
    const orderMaterialRelationGrid = ref({})// as VxeGridInstance
    // 搜索表单是否展开
    let operate = ref('验收合格')
    let proxyInfo = reactive({})
    const where = ref({})
    const eid = ref({})
    const startIndex = ref({})

    const materialOrderListApp = inject('materialOrderListApp', {})
    const materialOrderGrid = inject('materialOrderGrid', {})
    const gridOptions = reactive({
      border: true,
      resizable: true,
      showHeaderOverflow: true,
      showOverflow: true,
      highlightHoverRow: true,
      keepSource: true,
      id: 'orderMaterialRelationsGrid',
      // maxHeight: "100%",//表格高度
      height: 800,
      rowId: 'eid',
      selectRow: null,
      showEdit: false,
      showDetails: false,
      showEditTitle: '新建',
      showDetailsTitle: '查看',
      formData: {},//自定义的
      detailData: [],
      startIndex: startIndex,
      printConfig: {
        columns: [
          {field: 'name'},
          {field: 'email'},
          {field: 'nickname'},
          {field: 'age'},
          {field: 'amount'}
        ]
      },
      /*TODO:排序配置 */
      sortConfig: {
        trigger: 'cell',
        remote: true,
        multiple: true,//多字段排序，默认单排序
        showIcon: true,
        // iconAsc: "fa fa-arrow-up fa-1x",
        // iconDesc: "fa fa-arrow-down fa-1x",
      },
      customConfig: {
        storage: true
      },
      /*TODO:过滤器配置*/
      filterConfig: {
        remote: true
      },
      /*TODO:分页配置*/
      pagerConfig: {
        pageSize: 10,
        pageSizes: [5, 10, 15, 20, 50]
      },
      /*TODO:请求代理配置*/
      proxyConfig: {
        seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
        sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
        filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
        form: false, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
        // 对应响应结果 { result: [], page: { total: 100 } }
        props: {
          result: 'data.datas', // 配置响应结果列表字段
          total: 'data.totalCount', // 配置响应结果总页数字段
          message: 'data.msg'
        },
        /*TODO:请求*/
        ajax: {
          /*TODO:分页条件查询*/
          query: ({page, sorts, filters}) => {  // 接收 Promise
            const conditions = {...where.value}
            // 处理筛选条件
            filters.forEach(({property, values}) => {
              conditions[property] = values.join('$|$')
            })
            let materialOrderId = toRefs(props).orderId.value
            console.log(materialOrderId)
            const queryParams = {filters: {materialOrderId}}
            queryParams.currentPage = page.currentPage
            queryParams.pageSize = page.pageSize
            startIndex.value = (queryParams.currentPage - 1) * queryParams.pageSize + 1
            queryParams.orderBys = sorts;
            const $grid = orderMaterialRelationGrid.value
            $grid.queryParams = queryParams
            return OrderMaterialRelationService.findOrderMaterialRelations(queryParams).then(res => {
              let relations = res.data.datas
              relations.map((i) => {
                i.status = "验收合格";
                return i;
              })
              return res
            }).catch(error => {
              VXETable.modal.message({content: `加载数据出错，原因是：${error.message}`, status: 'error'});

            })
          },
        }
      },

      /*TODO:数据表列*/
      columns: [
        {type: 'seq', title: '#', width: 40},
        {field: 'eid', title: '订单材料id', width: 100, sortable: false},

        {
          field: 'supplyMaterialName',
          title: '材料名称',
          sortable: false
        },
        {
          field: 'supplierName',
          title: '供应商名称',
          sortable: false
        },
        {
          field: 'amount',
          title: '数量',
          sortable: false
        },
        {
          field: 'remark',
          title: '备注',
          sortable: false
        },

        {title: '验收状态', width: 250, slots: {default: 'operate'}}
      ],

      /*TODO:复选框配置*/
      checkboxConfig: {
        labelField: 'eid',
        reserve: false,
        highlight: false,
        range: true
      },

      editConfig: {
        trigger: 'click',
        mode: 'row',
        showStatus: true
      }
    })//as VxeGridProps
    provide('gridOptions', gridOptions)

    /*TODO:提交验收*/
    const onSubmit = () => {
      const $table = orderMaterialRelationGrid.value
      console.log($table.getTableData().tableData)
      OrderMaterialRelationService.updateOrderMaterialRelationStatus($table.getTableData().tableData).then(res => {
        console.log(res)
      })
      onBack()
      VXETable.modal.message({content: '提交成功', status: 'success'})
    }

    /*TODO:操作改变*/
    const operateChange = (val, row) => {
      console.log(val, row)
      row.operate = val;
    }

    /*TODO:返回列表*/
    const onBack = () => {
      setTimeout(() => {
        materialOrderGrid.value.commitProxy("query");
      }, 1500);
      materialOrderListApp.acceptModalShowing = false;
    }

    //TODO:这里需要返回才能调用
    return {
      eid,
      materialOrderGrid,
      orderMaterialRelationGrid,
      gridOptions,
      operate,
      operateChange,
      onSubmit,
      where,
      materialOrderListApp,
      onBack,
      ...toRefs(proxyInfo)
    }
  }
})
</script>

<style scoped>
.my-grid66 .alert-message {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.my-grid66 .alert-message-icon {
  width: 30px;
  text-align: center;
  color: #409eff;
  margin-right: 8px;
}

.my-grid66 .alert-message-content {
  flex-grow: 1;
  padding-right: 20px;
}

.my-grid66 .page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.my-grid66 .select-count {
  display: inline-block;
  vertical-align: middle;
}

.my-grid66 .my-input {
  width: 100%;
}

.my-grid66 .first-col {
  position: relative;
  height: 20px;
}

.my-grid66 .first-col:before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  width: 110px;
  height: 1px;
  transform: rotate(28deg);
  background-color: #e8eaec;
}

.my-grid66 .first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -10px;
}

.my-grid66 .first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -10px;
}
</style>
